<template>
    <transition name="custom-classes-transition"  leave-active-class="animated fadeOutRight">
        <router-view>
        </router-view>
    </transition>
</template>

<script>
    import 'font-awesome/css/font-awesome.min.css'
    import "animate.css/animate.min.css"
    import 'bootstrap/dist/css/bootstrap.min.css'
    import './css/normalize.css'
    import './css/main.css'
    import vueRouter from 'vue-router'
    import Index from './components/index'
    import Gmmp from './components/Gmmp'
    import Wzhd from './components/Wzhd'
    import Yyx from './components/Yyx'
    const router = new vueRouter({
        routes: [
            {path: '/', component: Index},
            {path: '/gmmp', component: Gmmp},
            {path: '/wzhd', component: Wzhd},
            {path: '/yyx', component: Yyx},
        ]
    });

    export default {
        name: 'app',
        router,
        data() {
            return {
                jq: '',
            }
        },
        mounted(){
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10.8 + 'px';
        },
        methods: {

        },
        components: {
        }
    }
</script>

<style>
    body {
        width: 10.8rem;
        height: 19.2rem;
    }
    .left .container{
        width: 4.25rem;
        height: 4.25rem;
        background: #0078D7;
        margin-top: .3rem;
        margin-left: .3rem;
        position: relative;
        padding: 0;
        overflow: hidden;
    }

    .right .container{
        width: 5.80rem;
        height: 5.80rem;
        background: #0078D7;
        margin-top: .3rem;
        position: relative;
        padding: 0;
        overflow: hidden;
    }

    .left{
        height: 100%;
    }
    .right{height: 100%;}
</style>
